import { defineConfig, transformerDirectives, transformerVariantGroup, presetUno } from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px';

export default defineConfig({
	// 用于配置样式的变体
	variants: [],
	// 常用的样式组合
	shortcuts: {
		'flex-center': 'flex justify-center items-center',
		'flex-x-center': 'flex justify-center',
		'flex-y-center': 'flex items-center',
		'flex-x-between': 'flex items-center justify-between',
		'flex-x-end': 'flex items-center justify-end',
		'wh-full': 'w-full h-full',
		'text-truncate': 'whitespace-nowrap overflow-hidden text-ellipsis',
		'bg-no-repeat-contain': 'bg-no-repeat bg-contain',
		'bg-no-repeat-cover': 'bg-no-repeat bg-cover',
		'abs-full': 'absolute left-0 right-0 top-0 bottom-0',
		'abs-x-center': 'absolute left-50% top-0 translate-x--1/2',
		'abs-y-center': 'absolute left-0 top-50% translate-y--1/2',
		'abs-center': 'absolute left-50% top-50% translate-x--1/2 translate-y--1/2',
	},
	// 自定义规则
	rules: [
		// transform-1-linear 相当于 { transition: transform 1s linear; }
		// transform-2-bounce 相当于 { transition: transform 2s bounce; }
		[
			/^transform-(\d+)-(.+)$/,
			([, duration, timingFunction]) => ({
				transition: `transform ${duration}s ${timingFunction}`,
			}),
		],
		// wh-10 相当于 { width: 10px; height: 10px; }
		[
			/^wh-(\d+)$/,
			([, wh]) => ({
				width: `${wh}px`,
				height: `${wh}px`,
			}),
		],
		// bg-rgba(255,255,0,0.2) 相当于 { background-color: rgba(255,255,0,0.2); }
		[
			/^bg-rgba\((\d+),(\d+),(\d+),([0,1]?\.?\d*)\)$/,
			([, r, g, b, a]) => ({
				'background-color': `rgba(${r},${g},${b},${a})`,
			}),
		],
		// p-1 相当于 { padding: 1px; }
		// p-1_2 相当于 { padding: 1px 2px; }
		// p-1_2_3 相当于 { padding: 1px 2px 3px; }
		// p-1_2_3_4 相当于 { padding: 1px 2px 3px 4px; }
		// m-1 相当于 { margin: 1px; }
		// m-1_2 相当于 { margin: 1px 2px; }
		// m-1_2_3 相当于 { margin: 1px 2px 3px; }
		// m-1_2_3_4 相当于 { margin: 1px 2px 3px 4px; }
		[
			/^([pm])-(\d+)(?:_(\d+))(?:_(\d+))?(?:_(\d+))?(?:_(\d+))?$/,
			([, type, top, right, bottom, left]) => {
				const pm = type === 'p' ? 'padding' : 'margin';
				const sides = [top, right, bottom, left]
					.filter(Boolean)
					.map((item) => item + 'px')
					.join(' ');
				return {
					[pm]: sides,
				};
			},
		],
	],
	// 预设配置
	presets: [
		// 例如，baseFontSize 为 4 时，1rem 转换为 4px，2rem 转换为 8px。
		presetRemToPx({ baseFontSize: 4 }),
		// UnoCss提供的默认预设
		presetUno(),
	],
	// 用于扩展和转换输入的类名。
	transformers: [
		// 处理指令类（如 @apply、@screen、@variants），
		// 并将其转化为实际的 CSS 规则或媒体查询。
		transformerDirectives(),
		// 处理变体类的组合（如 hover:bg-red-500、focus:text-white），
		// 并将它们合并为一组 CSS 声明，使类名更加简洁。
		transformerVariantGroup(),
	],
});
